<template>
  <view class="container">
    <view>
      <view class="uni-margin-wrap">
        <swiper
          class="swiper"
          circular
          :indicator-dots="indicatorDots"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
        >
          <swiper-item v-for="item in detailData.imgs" :key="item.index">
            <image class="banner-img" :src="item" mode="scaleToFill" />
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="desc">{{ detailData.desc }}</view>
    <view class="brand">品牌：{{ detailData.brand }}</view>
    <view class="proname">{{ detailData.proname }}</view>
    <view class="originprice">{{ detailData.originprice }}￥</view>

    <uni-goods-nav
      :options="options"
      :fill="true"
      :button-group="buttonGroup"
      @click="onClick"
      @buttonClick="buttonClick"
      class="goods-carts"
    />
  </view>
</template>

<script setup lang="js">
import { ref } from 'vue'
import {
  onLoad
} from "@dcloudio/uni-app";
const options = [{
  icon: 'chat',
  text: '客服'
}, {
  icon: 'shop',
  text: '店铺',
  info: 2,
  infoBackgroundColor: '#007aff',
  infoColor: "#f5f5f5"
}, {
  icon: 'cart',
  text: '购物车',
  info: 2
}]
const buttonGroup = [{
  text: '加入购物车',
  backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  color: '#fff'
},
{
  text: '立即购买',
  backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  color: '#fff'
}
]
function onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			}
function buttonClick(e) {
				console.log(e)
				this.options[2].info++
			}
//获取详情
const detailData = ref([])
const proid = ref('')
const getTetail = () => {
  uni.request({
    url: `http://47.94.6.186:3001/api/pro/detail/${proid.value}`,
    method: 'GET',
    success: (res) => {
      console.log(res.data);
      detailData.value = res.data.data
    },
  })
}
// 轮播图配置
const indicatorDots = ref(true);
const autoplay = ref(true);
const interval = ref(2000);
const duration = ref(500);
onLoad((options) => {
  proid.value = options.id
  console.log(proid.value);
  getTetail()
});
</script>

<style scoped>
.uni-margin-wrap {
  width: 100%;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.swiper {
  width: 100%;

  height: 600rpx;
}

.banner-img {
  height: 100%;
  width: 100%;
}

.desc {
  font-size: 30rpx;
  margin: 20rpx 0;
}

.proname {
  font-size: 40rpx;
  font-weight: 700;
}

.originprice {
  color: red;
  font-size: 40rpx;
  font-weight: 700;
  padding-bottom: 50px;
}

.brand {
  font-size: 30rpx;
  margin: 20rpx 0;
}

.example-body {
  padding: 0;
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
}

.goods-carts {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  height: 50px;
  position: fixed;
  left: 0;
  right: 0;
  /* #ifdef H5 */
  left: var(--window-left);
  right: var(--window-right);
  /* #endif */
  bottom: 0;
}
</style>
